<template>
  <commonTable
    rowKey="vipId"
    :columns="roomTypeTableState.columns"
    :rules="rules"
    name="vip"
  >
    <template #form="{ record }">
      <a-form-item label="vip折扣" name="vipDiscount">
        <a-input
          type="number"
          v-model:value.number="record.vipDiscount"
        ></a-input>
      </a-form-item>
      <a-form-item label="vip描述" name="vipDescription">
        <a-input v-model:value="record.vipDescription"></a-input>
      </a-form-item>
    </template>
  </commonTable>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import commonTable from "../../utils/CommonTable";
import { roomType } from "@/api";

const store = useStore();
const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "vipId",
    },
    {
      title: "vip折扣",
      dataIndex: "vipDiscount",
    },
    {
      title: "vip描述",
      dataIndex: "vipDescription",
    },
    {
      title: "操作",
      slots: { customRender: "action" },
    },
  ],
});
const rules = {
  vipDiscount: [
    {
      required: true,
      type: "number",
      min: 1,
      max: 100,
      message: "最大为100的数字",
    },
  ],
  vipDescription: [{ required: true, message: "不能为空" }],
};
</script>

<style scoped>
.fjlx {
  height: 100%;
}
</style>
